<template>

  <el-dialog
    :title="showTitle"
    width="40%"
    :visible="showDialog"
    @close="closeFn"
  >
    <el-form ref="form" label-width="80px" style="padding:15px 30px;" :rules="rules" :model="form">
      <el-form-item label="模板类型" prop="templateType">
        <el-select v-model="form.templateType" placeholder="请选择模板类型" style="width:100%">
          <el-option label="同城寄" :value="1" />
          <el-option label="省内寄" :value="2" />
          <el-option label="经济区互寄" :value="3" />
          <el-option label="跨省" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="运送类型" prop="transportType">
        <el-select v-model="form.transportType" placeholder="请选择运送类型" style="width:100%">
          <el-option label="普快" value="1" />
          <el-option label="特快" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="关联城市" prop="associatedCityList">
        <el-checkbox-group v-if="form.templateType===3" v-model="form.associatedCityList">
          <el-checkbox label="2">京津冀</el-checkbox>
          <el-checkbox label="3">江浙沪</el-checkbox>
          <el-checkbox label="4">川渝</el-checkbox>
          <el-checkbox label="5">黑吉辽</el-checkbox>
        </el-checkbox-group>
        <span v-else>全国</span>
      </el-form-item>
      <el-form-item label="首重价格" prop="firstWeight">
        <el-input v-model="form.firstWeight" placeholder="请输入首重价格" />
      </el-form-item>
      <el-form-item label="续重价格" prop="continuousWeight">
        <el-input v-model="form.continuousWeight" placeholder="请输入续重价格" />
      </el-form-item>
      <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
        <el-input v-model="form.lightThrowingCoefficient" placeholder="请输入轻抛系数" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确认</el-button>
        <el-button @click="closeFn">取消</el-button>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script>
import { addCarriagesApi } from '@/api/transit'
export default {
  components: {},
  props: {
    obj: {
      type: Object
    },
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        associatedCityList: [1], // 关联城市
        continuousWeight: '',
        firstWeight: '',
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: ''
      },
      label: '',
      rules: {
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ], // 续重价格
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ], // 首重价格
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ], // 轻抛系数
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ], // 模板类型
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ] // 运送类型
        // associatedCityList: [
        //   { required: true, message: '运送类型不能为空', trigger: 'change' }
        // ]
      }
    }
  },
  computed: {
    showTitle() {
      return this.obj.id ? '编辑模板' : '新增模板'
    }
  },
  watch: {
    'form.templateType': function(newVal) {
      if (newVal === 3) {
        this.form.associatedCityList = [] // 将数组置为空
      } else if (newVal !== 3) {
        this.form.associatedCityList = [1]
      }
    }
  },
  created() {
  },

  methods: {

    editData() {
      // this.form = this.obj
      // console.log(this.form)
      Object.assign(this.form, this.obj)
      console.log(this.form.associatedCityList)
    },
    async submit() {
      try {
        // 全部校验
        await this.$refs.form.validate()
        if (this.form.id) {
          await addCarriagesApi(this.form)
          this.$message.success('编辑完成')
        } else {
          // 发送请求
          const res = await addCarriagesApi(this.form)
          console.log(res)
          // 关闭弹窗
          this.$message.success('新增模板成功')
          this.closeFn()
        }
        // 告诉父组件重新
        this.$emit('premSuccess')
        this.closeFn()
      } catch (error) {
        this.$message.warning('*号必填')
      }
    },
    closeFn() {
      this.form = {
        associatedCityList: [], // 关联城市
        continuousWeight: '',
        firstWeight: '',
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: ''
      }
      // 重置表单
      this.$refs.form.resetFields()
      this.$emit('update:showDialog', false)
    }

  }
}

</script>
<style less="scss" scoped>
</style>
